<template>
    <div class="box">
        <van-nav-bar title="手机登录" left-arrow />
        <div class="box1">
            <div class="lg">
                <img src="../assets/orange@3x.png" alt="">
            </div>
            <div class="ipt">
                <input type="text" placeholder="手机号" class="tel">
            </div>
            <div class="ipt">
                <input type="text" placeholder="验证码" class="yan"> <button>获取验证码</button>
            </div>
            <button class="btn1" @click="add">登&emsp;&emsp;录</button>
        </div>


    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        add(){
            this.$router.push('/about')
        }
    },
}
</script>
<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
}
.box {
    .box1{
        margin: 250px auto;
        .btn1{
            width: 80%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            background-color: #ccc;
            border: 0;
            margin: 10px auto;
        }
        .ipt{
            width: 90%;
            height: 40px;
            margin: 5px auto;
            border-bottom: 1px solid #ccc;
            .tel{
                width: 100%;
                height: 96%;
                border: 0;
                outline: none;
            }
            .yan{
                border: 0;
                width: 70%;
                height: 96%;
                outline: none;
            }
            button{
                width: 26%;
                height:76%;
                border: 0;
                background-color: #ccc;
                color: #fff;
            }
        }
        .lg {
        width: 60%;
        height: 80px;
        margin: auto;

        img {
            width: 80%;
            height: 80%;
        }
    }

    }
    
}
</style>